<template>
  <view class="container">
    <view class="list" v-if="cate == 1">
      <view class="item c-677585 fs-24" :class="{ 'item-active': checkIds.includes(item.id) }"
        v-for="item in priceList_rent" :key="item.id" @click="changeCheck(item.id)">{{ item.name }}</view>
    </view>
    <view class="list" v-else>
      <view class="item c-677585 fs-24" :class="{ 'item-active': checkIds.includes(item.id) }" v-for="item in priceList"
        :key="item.id" @click="changeCheck(item.id)">{{ item.name }}</view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: {
    cate: String,
    checkIds: {
      type: Array,
      default() {
        return [];
      },
    },
    priceList: {
      type: Array,
      default() {
        return [];
      },
    },
    priceList_rent: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  methods: {
    changeCheck(id) {
      if (this.checkIds.includes(id)) {
        this.$emit(
          "changeCheck",
          this.checkIds.filter((item) => item != id)
        );
      } else {
        this.$emit("changeCheck", [...this.checkIds, id]);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  .list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 30rpx;
    padding: 16rpx;

    .item {
      width: 100%;
      height: 40px;
      border-radius: 4px;
      background: rgba(247, 248, 250, 1);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .item-active {
      background-color: $theme-color;
      color: #fff;
    }
  }
}
</style>